'use client';

import { Button } from '@/components/ui/button';
import { ArrowRight, Loader2 } from 'lucide-react';
import { useFormStatus } from 'react-dom';

interface SubmitButtonProps {
  featured?: boolean;
}

export function SubmitButton({ featured = false }: SubmitButtonProps) {
  const { pending } = useFormStatus();

  return (
    <Button
      type="submit"
      disabled={pending}
      className={`
        w-full flex items-center justify-center transition-colors
        ${featured
          ? 'bg-[#50E3C2] hover:bg-[#3AC4A5] text-slate-900'
          : 'bg-slate-800 hover:bg-slate-700 text-white border border-slate-700'}
        rounded-lg
      `}
    >
      {pending ? (
        <>
          <Loader2 className="animate-spin mr-2 h-4 w-4" />
          加载中...
        </>
      ) : (
        <>
          立即开始
          <ArrowRight className="ml-2 h-4 w-4" />
        </>
      )}
    </Button>
  );
}
